import 'ol/ol.css'
import { Map, View, Feature, Overlay } from 'ol'
import { Point, LineString, Polygon } from 'ol/geom'
import TileLayer from 'ol/layer/Tile'
import { OSM, TileWMS } from 'ol/source'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
// import OSM from "ol/source/OSM";
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { Projection } from 'ol/proj'
import MVT from 'ol/format/MVT'
import VectorTileLayer from 'ol/layer/VectorTile'
import VectorTileSource from 'ol/source/VectorTile'
import XYZ from 'ol/source/XYZ'
import { toStringHDMS } from 'ol/coordinate'
import { Style, Icon, Stroke, Fill, Text, Circle } from 'ol/style'
import { Select, defaults as defaultInteractions } from 'ol/interaction'
import { Draw } from 'ol/interaction'
import { defaults as defaultControls, ZoomSlider } from 'ol/control'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { fromLonLat, toLonLat, transform } from 'ol/proj'
import GeoJSON from 'ol/format/GeoJSON'
export default class MapUnits {
  constructor(data) {
    this.map = null
    this.layerName = ['point', 'maker', 'LineString', 'category3']
    this.markerLayer = {}
    this.initMap()
  }
  initMap() {
    let tileOSM = new TileLayer({
      source: new XYZ({
        url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=df80fca5cf879b919f55ab28038f983f'
      })
    })
    for (let layerName of this.layerName) {
      this.markerLayer[layerName] = new VectorLayer({
        source: new VectorSource(),
        zIndex: 3,
        visible: true,
        id: `${layerName}`,
        style:
          `${layerName}` == 'maker'
            ? new Style({
                // image: new Icon({
                //   src: "/gis/img/wlw-dt.png",
                // }),
                image: new Circle({
                  //点样式
                  radius: 7,
                  fill: new Fill({
                    color: '#00c033'
                  })
                }),
                fill: new Fill({
                  //填充样式
                  color: 'rgba(255, 255, 255, 0.2'
                }),
                stroke: new Stroke({
                  //线样式
                  color: '#00c033',
                  width: 2
                })
              })
            : null,
        renderMode: 'webgl' // 使用WebGL渲染器
      })
      // var source = new VectorSource();
      // var vectorLayer = new VectorLayer({
      //   source: source,
      //   visible: true,
      //   id: `xxxxx`,
      //   style: new Style({
      //     fill: new Fill({               //填充样式
      //       color: 'rgba(255, 255, 255, 0.2'
      //     }),
      //     stroke: new Stroke({           //线样式
      //       color: '#00c033',
      //       width: 2
      //     }),
      //     image: new Icon({
      //       src: "/gis/img/hotels.png",
      //     }),
      //   })
      // });
    }
    this.map = new Map({
      layers: [tileOSM, ...Object.values(this.markerLayer)],
      view: new View({
        center: [113.28594543545208, 22.450370381145557],
        projection: 'EPSG:4326',
        zoom: 8,
        maxZoom: 20,
        minZoom: 1
      }),
      target: 'Omap'
    })

    this.map.on('click', (evt) => {})
  }

  getLayer(layerid) {
    return this.map
      .getLayers()
      .getArray()
      .find((item) => item.get('id') == `${layerid}`)
  }
  clearlayers(id) {
    console.log(393, this.getLayer(id))
    this.map.removeLayer(this.getLayer(id))
  }
}
